import {Fab, TextField} from "@mui/material";
import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogActions from "@mui/material/DialogActions";
import Button from "@mui/material/Button";
import {createTheme, ThemeProvider} from "@mui/material/styles";
import React, {useEffect} from "react";
import Cookie from "react-cookies";
import {login163Music, login163Status} from "../../utils/request/163request";
import ls from "localStorage";
import './Login163.css'

const theme = createTheme({
    palette: {
        primary: {
            main: 'rgba(255,255,255,0)',
            contrastText: 'rgba(255,255,255,0)',
            light: 'rgba(255,255,255,0)',
        },
    },
});

export default function Login163(props){
    const [open, setOpen] = React.useState(false);
    const [text, setText] = React.useState('请输入网易云音乐的手机号+密码');
    const [isLogin, setIsLogin] = React.useState(false);
    const [user, setUser] = React.useState("");
    const loadLocalStorage = () => {
        let parse = ls.getItem('163cookies');
        return parse
    }

    useEffect(() => {
        login163Status().then((r) => {
            let userName = r.data.data?.account?.userName;
            if(userName !== undefined){
                setUser(userName);

                setIsLogin(true);
            }
        })

    },[])


    const handleClickOpen = () => {
        if(user !== ""){
            setText('请输入网易云音乐的手机号+密码\n现有账号: '+user)
        }else
        setText('请输入网易云音乐的手机号+密码\n')

        setOpen(true);

    };

    const handleClose = () => {

        setOpen(false);
    };

    const handleOk = async () => {
        setText('正在登录')
        await login163Music(inputvalue,inputpwd).then((r) => {
            if(r.data.cookie !== undefined && r.data.code === 200){
                setText('登录成功,正在存储...')
                saveLocalStorage(r.data.cookie)
                saveCookie(r.data.cookie);
                setIsLogin(true)
                setTimeout(() => {
                    setOpen(false);

                }, 2000);
            }
        })

    };
    var inputvalue = "";
    const changeInput = (event) => {

        inputvalue = event.target.value;

    };

    var inputpwd = "";
    const changeInputPWD = (event) => {

        inputpwd = event.target.value;

    };
    const saveLocalStorage = (c) => {

        ls.setItem('163cookies',c)
    }

    const saveCookie = (c) =>{
        c = c.replaceAll(' ','')
        c = c.replaceAll('\n','')
        let strings = c.split(';');

        if(c.indexOf("MUSIC_U") !== -1){
            //console.log('sava COOKIE@@@@@@@@@@@@@@@@@@')
            strings.forEach(element => {
                let is = element.split('=');
                Cookie.save(is[0],is[1]);
            });
        }
    }
    return(
        <>
            <div>
                <Dialog open={open} onClose={handleClose}>
                    <DialogTitle>登录网易云音乐</DialogTitle>
                    <DialogContent>
                        <DialogContentText>
                            {text}
                        </DialogContentText>
                        <TextField
                            autoFocus
                            margin="dense"
                            id="account"
                            label='输入账号'
                            type="text"
                            fullWidth
                            variant="standard"
                            onChange={changeInput}

                        />
                        <TextField
                            margin="dense"
                            id="password"
                            label='输入密码'
                            type="password"
                            fullWidth
                            variant="standard"
                            onChange={changeInputPWD}

                        />
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={handleClose}>取消</Button>
                        <Button onClick={handleOk}>确认</Button>
                    </DialogActions>
                </Dialog>
            </div>
            <div className="content_163">
                <ThemeProvider theme={theme}>
                    <Fab color="primary" ariant="extended" onClick={handleClickOpen}>
                        <img  width='32px'  height='32px' src={isLogin?'./ico163.png' : './unico163.png'}/>
                    </Fab>
                </ThemeProvider>
            </div>
        </>
    )

}